<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>水务基础图层展示(矢量瓦片)</title>
    <link href="https://iclient.supermap.io/dist/ol/iclient-ol.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/ktol3.css" type="text/css"/>
    <link rel="stylesheet" href="../css/mapPop.css" type="text/css"/>
    <link rel="stylesheet" href="../Build/Cesium/Widgets/widgets.css"/>
    <link rel="stylesheet" href="../css/pretty.css"/>
    <link rel="stylesheet" href="../css/bootstrap3.3.7.min.css"/>
    <link rel="stylesheet" href="../css/bootstrap-table.min.css"/>

    <script type="text/javascript" src="../js/jquery.min.3.2.1.js"></script>
    <script type="text/javascript" src="../js/bootstrap3.3.7.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap-treeview.js"></script>
    <script type="text/javascript" src="../js/ol-debug.js"></script>
    <script type="text/javascript" src="../js/proj4.js"></script>
    <script type="text/javascript" src="../js/olms.js"></script>
    <script type="text/javascript" src="../js/iclient-ol-es6.js"></script>
    <script src="../js/fieldConfig.js"></script>
    <script src="../js/bootstrap-table.min.js"></script>
    <script src="../js/bootstrap-table-zh-CN.min.js"></script>
    <script src="../js/turf.min.js"></script>
    <script src="../data/vectorTileLayers.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }

        .cesium-viewer .cesium-widget-credits {
            display: none !important;
        }

        .pnl-right {
            position: fixed;
            right: 20px;
            top: 50px;
            width: 385px;
        }

        .pnl-right ul {
            border-bottom: 1px solid #eaeaea;
        }

        .panel-result {
            position: fixed;
            right: 20px;
            top: 215px;
            width: 384px;
        }

        .input-group input {
            height: 100%;
            padding: 7px;
        }

        .margin-top {
            margin-top: 4px;
        }

        .close-btn {
            position: relative;
            float: right;
            cursor: pointer;
        }

        .fixed-table-pagination .pagination-detail,
        .fixed-table-pagination div.pagination {
            margin-top: 0;
            margin-bottom: 2px;
            font-size: 13px;
            padding: 0 8px;
        }

        .fixed-table-pagination .pagination a {
            padding: 6px 11px;
        }

        .fixed-table-pagination div.pagination {
            padding: 0 5px 0 0;
        }

        .tool-bar {
            position: absolute;
            margin: 10px;
            top: 0;
            left: 10px;
            height: 85%;
            z-index: 100;
            width: 290px;
        }

        .tree-panel {
            height: 100%;
        }

        .tree-panel .tab-pane {
            height: calc(100% - 40px);
        }

        .my-tree {
            height: 100%;
            overflow-y: auto;
        }

        .checkbox-tree .list-group-item {
            position: relative;
            display: block;
            margin-bottom: -1px;
            background-color: #fff;
            border: unset;
            color: #428bca;
            /*padding: 0 4px;*/
            padding: 0;
        }

        .normal-tree .list-group-item {
            position: relative;
            display: block;
            margin-bottom: -1px;
            background-color: #fff;
            color: #428bca;
            padding: 4px;
        }

        #info .info-content {
            max-height: 240px;
            overflow: auto;
        }

        #menu {
            position: absolute;
            z-index: 2;
            padding: 6px 10px;
            right: 20px;
            top: 10px;
            border-radius: 4px;
            -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            background: #fff;
        }

        label {
            margin: 0;
            margin-right: 10px;
        }

        .btn-group button {
            padding: 6px 18px;
        }

        .bAnalysis {
            margin-top: 10px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
        }

        .bAnalysis select {
            width: calc(100% - 110px);
            height: 32px;
        }

        .bAnalysis div {
            text-align: right;
            width: 109px;
            float: left;
        }

        #searchListDiv {
            display: none;
        }

        .tool-btn {
            position: absolute;
            z-index: 2;
            /*padding: 4px 10px;*/
            right: 240px;
            top: 12px;
            border-radius: 4px;
            -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            background: #fff;
        }

        #tool-PickBox {
            position: absolute;
            top: 20px;
            left: 40%;
            display: none;
            background-color: #fff;
            padding: 10px;
            box-shadow: 0px 0px 2px #676767;
        }
    </style>
</head>

<body>
<div id="map" style="width: 100%; height: 100%"></div>
<div class="tool-btn">
    <button type="button" style="background: #fff;padding:6px 16px;border: 0;"
            onclick="onClickPickup()"> 坐标拾取
    </button>
</div>
<div id="tool-PickBox">
    <span>x：<input id="pointX" type="text" value=""/></span>
    <span>y：<input id="pointY" type="text" value=""/></span>
    <button type="button"
            onclick="onPickupClear()"> 关闭
    </button>
</div>
<div id="menu" class="mapboxgl-ctrl">

    <input
            id="image"
            type="radio"
            name="rtoggle"
            value="image"
            checked="checked"
    />影像底图
    <input
            id="dark"
            type="radio"
            name="rtoggle"
            value="dark"
    />矢量黑夜底图
</div>
<div class="panel panel-primary tool-bar">
    <ul class="nav nav-pills">
        <li role="presentation" class="active">
            <a href="#themelayers" role="tab" data-toggle="tab">专题图</a>
        </li>
        <li role="presentation">
            <a href="#baselayers" role="tab" data-toggle="tab">底图</a>
        </li>
        <li role="presentation">
            <a href="#yztlayers" role="tab" data-toggle="tab">粤政图</a>
        </li>
    </ul>
    <!-- 面板区 -->
    <div class="tab-content tree-panel">
        <div role="tabpanel" class="tab-pane active" id="themelayers">
            <div id="tree1" class="my-tree checkbox-tree"></div>
        </div>
        <div role="tabpanel" class="tab-pane" id="baselayers">
            <div id="treeBaseLayer" class="my-tree normal-tree"></div>
        </div>
        <div role="tabpanel" class="tab-pane" id="yztlayers">
            <div id="treeYztlayers" class="my-tree checkbox-tree"></div>
        </div>
    </div>
</div>
<div id="info" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="info-content" class="pop-info"></div>
</div>
<div class="panel panel-primary pnl-right">
    <ul class="nav nav-pills">
        <li role="presentation" class="active" onclick="handleSelect(1)">
            <a href="#stats" role="tab" data-toggle="tab">按类型统计</a>
        </li>
        <li role="presentation" onclick="handleSelect(2)">
            <a href="#query" role="tab" data-toggle="tab">要素查询</a>
        </li>
        <li role="presentation" onclick="handleSelect(3)">
            <a href="#buffer" role="tab" data-toggle="tab">空间分析</a>
        </li>
        <li role="presentation" onclick="handleSelect(4)">
            <a href="#bufferAnalysis" role="tab" data-toggle="tab">缓冲区分析</a>
        </li>
    </ul>
    <!-- 面板区 -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="stats">
            <div style="padding: 8px 15px">
                <div class="input-group" style="margin-top: 5px">
                            <span class="input-group-addon" id="basic-addon1"
                            >关键字</span
                            >
                    <input
                            id="sKeyword"
                            type="text"
                            class="form-control"
                            placeholder="(可为空)"
                            aria-describedby="basic-addon1"
                    />
                </div>
                <input
                        type="button"
                        class="btn btn-default"
                        style="margin: 10px 0"
                        value="统计"
                        onclick="onClickStatistic()"
                />
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="query">
            <div style="padding: 8px 15px">
                <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1"
                            >要素类型</span
                            >
                    <select class="form-control typeList" id="typeList"></select>
                </div>
                <div class="input-group margin-top">
                    <span class="input-group-addon">关键字</span>
                    <input
                            id="qKeyword"
                            type="text"
                            class="form-control"
                            placeholder="(可为空)"
                            aria-describedby="basic-addon1"
                    />
                </div>
                <input
                        type="button"
                        class="btn btn-default margin-top"
                        value="查询"
                        onclick="onClickQuery()"
                />
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="buffer">
            <div style="padding: 8px 15px">
                <div class="input-group">
                    <span class="input-group-addon">缓冲距离(km)</span>
                    <input
                            id="distance"
                            type="text"
                            class="form-control"
                            placeholder="(单位：km)"
                            value="2"
                            aria-describedby="basic-addon1"
                    />
                </div>
                <div
                        class="btn-group margin-top"
                        role="group"
                        aria-label="..."
                >
                    <button
                            id="drawPoint"
                            value="Point"
                            type="button"
                            class="btn btn-default"
                    >
                        绘点
                    </button>
                    <button
                            id="drawLine"
                            value="LineString"
                            type="button"
                            class="btn btn-default"
                    >
                        绘线
                    </button>
                    <button
                            id="drawPolygon"
                            value="Polygon"
                            type="button"
                            class="btn btn-default"
                    >
                        绘面
                    </button>
                    <button
                            id="clear"
                            value="Clear"
                            type="button"
                            class="btn btn-default"
                    >
                        清除
                    </button>
                </div>
                <input
                        id="bufferback"
                        type="button"
                        class="btn btn-default margin-top"
                        style="display: none"
                        value="返回上一级"
                        onclick="backtoForward()"
                />
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="bufferAnalysis">
            <div style="padding:0px 15px 8px 15px">
                <div id="hcInput" style="margin-top: 10px">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon2">要素类型</span>
                        <select class="form-control typeList" id="typeList2"></select>
                    </div>
                    <div class="input-group bufferDistanceDiv" style="margin: 6px 0;display: none;">
                        <span class="input-group-addon">缓冲距离(km)</span>
                        <input id="bufferDistance"
                               type="text"
                               class="form-control"
                               placeholder="(单位：km)"
                               value="2"
                               aria-describedby="basic-addon1"/>
                    </div>
                    <div class="input-group" id="searchListDiv">
                        <span class="input-group-addon" id="basic-addon3">查询类型</span>
                        <select class="form-control searchList" id="searchList"></select>
                    </div>
                </div>
                <div style="margin-top: 6px">
                    <button type="button"
                            class="btn btn-default"
                            onclick="searchQuery()">
                        查询
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>
<div class="panel panel-primary panel-result" style="display: none">
    <div class="panel-heading">
        结果
        <span class="close-btn" onclick="onClickClose('close')"> X </span>
    </div>
    <div class="tbStat" style="display: none">
        <table id="tbStat" class="table"></table>
    </div>
    <div class="tbQuery" style="display: none">
        <table id="tbQuery" class="table"></table>
    </div>
    <div class="bufferQuery" style="display: none">
        <table id="bufferQuery" class="table"></table>
    </div>
</div>
<script type="text/javascript">

    const BASE_LAYERS = {
        image:
            'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI201712_20ZW2K/ImageServer/tile/{z}/{y}/{x}',
        dark:
            'http://192.168.37.161/tilemap_1/rest/services/SZMAP/SZMAP_BLUE_ZW2K/MapServer/tile/{z}/{y}/{x}',
    }

    const REQUEST_STAT = 'http://10.253.190.55:8080/web/search/group'
    const REQUEST_QUERY = 'http://10.253.190.55:8080/web/search/list'
    const REQUEST_DETAIL = 'http://10.253.190.55:8080/web/search/getById'
    const REQUEST_BUFFERCOUNT =
        'http://10.253.190.55:8080/web/search/getSpatialCount'
    const REQUEST_BUFFERDATA =
        'http://10.253.190.55:8080/web/search/getSpatialData'

    var GMAPURL = 'http://10.253.190.56:8080/gmap/proxyHandler?serviceCode={{serviceCode}}&url=https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke'


    var baseData = [
        {
            text: '遥感影像',
            nodes: [
                {
                    text: '2019',
                    nodes: [
                        {
                            text: '11月0.2米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI201911_20ZW2K/ImageServer',
                            layer: 'SZAVI201911_20ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '0.5米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI2019_50GK2K/ImageServer',
                            layer: 'SZAVI2019_50GK2K',
                            serverType: 'ArcGIS Server',
                        }
                    ]
                },
                {
                    text: '2017',
                    nodes: [
                        {
                            text: '12月0.2米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI201712_20ZW2K/ImageServer',
                            layer: 'SZAVI201712_20ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2016',
                    nodes: [
                        {
                            text: '12月0.2米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI201612_20ZW2K/ImageServer',
                            layer: 'SZAVI201612_20ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '12月0.5米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI201612_50ZW2K/ImageServer',
                            layer: 'SZAVI201612_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '1月0.5米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI20160103_20ZW2K/ImageServer',
                            layer: 'SZAVI20160103_20ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2015',
                    nodes: [
                        {
                            text: '4月0.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRI201504_50ZW2K/ImageServer',
                            layer: 'SZSRI201504_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2014',
                    nodes: [
                        {
                            text: '12月0.5米公开版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI201412_50GK2K/ImageServer',
                            layer: 'SZAVI201412_50GK2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '10月0.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRI201410_50ZW2K/ImageServer',
                            layer: 'SZSRI201410_50ZW2K',
                            serverType: 'ArcGIS Server',
                        }
                    ]
                },
                {
                    text: '2013',
                    nodes: [
                        {
                            text: '11月0.5米公开版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI201311_50GK2K/ImageServer',
                            layer: 'SZAVI201311_50GK2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '0.5米公开版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRI2013_50ZW2K/ImageServer',
                            layer: 'SZSRI2013_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '1米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRI2013_100ZW2K/ImageServer',
                            layer: 'SZSRI2013_100ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2012',
                    nodes: [
                        {
                            text: '0.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRI2012_50ZW2K/ImageServer',
                            layer: 'SZSRI2012_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '11月0.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRIPL201211_50ZW2K/ImageServer',
                            layer: 'SZSRIPL201211_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2011',
                    nodes: [
                        {
                            text: '11月0.5米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI201111_50ZW2K/ImageServer',
                            layer: 'SZAVI201111_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '0.8米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRIIK2011_80ZW2K/ImageServer',
                            layer: 'SZSRIIK2011_80ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2010',
                    nodes: [
                        {
                            text: '0.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRIWQ2010_50ZW2K/ImageServer',
                            layer: 'SZSRIWQ2010_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2009',
                    nodes: [
                        {
                            text: '2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRI2009_250ZW2K/ImageServer',
                            layer: 'SZSRI2009_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '12月0.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRIWQ200912_50ZW2K/ImageServer',
                            layer: 'SZSRIWQ200912_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '06月0.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRIWQ200906_50ZW2K/ImageServer',
                            layer: 'SZSRIWQ200906_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2008',
                    nodes: [
                        {
                            text: '0.2米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI2008_20ZW2K/ImageServer',
                            layer: 'SZAVI2008_20ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '12月0.6米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRIWV200812_60ZW2K/ImageServer',
                            layer: 'SZSRIWV200812_60ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '0.6米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRIQB2008_60ZW2K/ImageServer',
                            layer: 'SZSRIQB2008_60ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2007',
                    nodes: [
                        {
                            text: '0.5米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI2007_50ZW2K/ImageServer',
                            layer: 'SZAVI2007_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '12月2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRI200712_250ZW2K/ImageServer',
                            layer: 'SZSRI200712_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '10月2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRI200710_250ZW2K/ImageServer',
                            layer: 'SZSRI200710_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '07月2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRISP200707_250ZW2K/ImageServer',
                            layer: 'SZSRISP200707_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '05月2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRI200705_250ZW2K/ImageServer',
                            layer: 'SZSRI200705_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2006',
                    nodes: [
                        {
                            text: '12月2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRISP200612_250ZW2K/ImageServer',
                            layer: 'SZSRISP200612_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '09月2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRISP200609_250ZW2K/ImageServer',
                            layer: 'SZSRISP200609_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '06月2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRISP200606_250ZW2K/ImageServer',
                            layer: 'SZSRISP200606_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '03月2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRISP200603_250ZW2K/ImageServer',
                            layer: 'SZSRISP200603_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2005',
                    nodes: [
                        {
                            text: '11月2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRISP200511_250ZW2K/ImageServer',
                            layer: 'SZSRISP200511_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '0.6米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRIQB2005_60ZW2K/ImageServer',
                            layer: 'SZSRIQB2005_60ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2004',
                    nodes: [
                        {
                            text: '0.6米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI2004_60ZW2K/ImageServer',
                            layer: 'SZAVI2004_60ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2003',
                    nodes: [
                        {
                            text: '0.6米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRIIK2003_60ZW2K/ImageServer',
                            layer: 'SZSRIIK2003_60ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2001',
                    nodes: [
                        {
                            text: '1米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI2001_100ZW2K/ImageServer',
                            layer: 'SZAVI2001_100ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
            ],
        },
        {
            text: '基础地图',
            nodes: [
                {
                    text: '电子地图',
                    nodes: [
                        {
                            text: '矢量底图-白色-版本1',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZMAP/SZMAP_BASEMAP_ZW2K/MapServer',
                            layer: 'SZMAP_BASEMAP_ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '矢量底图-白色-版本2',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/ST/SZMAP_ST_ZW2K/MapServer',
                            layer: 'SZMAP_ST_ZW2K',
                            serverType: 'ArcGIS Server',
                            type: "1"
                        },
                        {
                            text: '矢量底图-蓝色',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZMAP/SZMAP_BLUE_ZW2K/MapServer',
                            layer: 'SZMAP_BLUE_ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '矢量底图-蓝色-无注记',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZMAP/SZMAP_MAP_ZFW_ZW2K/MapServer',
                            layer: 'SZMAP_MAP_ZFW_ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '行政区划矢量地图',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZMAP/SZMAP_SDDT_ZW2K/MapServer',
                            layer: 'SZMAP_SDDT_ZW2K',
                            serverType: 'ArcGIS Server',
                            origin: [-400, 399.9999999999998]
                        },
                        {
                            text: '轨道交通矢量地图',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZTHEME/SZMAP_ROAD_GK2K/MapServer',
                            layer: 'SZMAP_ROAD_GK2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '社区网格图',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZTHEME/XZQ_WGB_2K/MapServer',
                            layer: 'XZQ_WGB_2K',
                            serverType: 'ArcGIS Server2',
                        }
                    ]
                },
                {
                    text: '水务底图',
                    nodes: [
                        {
                            text: '水务底图-地形版',
                            url: 'http://10.253.190.57:8080/iserver/services/map-ugcv5-dixingfa1/wmts-china',
                            layer: 'dixing_fa1',
                            matrixSet: 'Custom_dixing_fa1',
                            serverType: 'WMTS',
                        },
                        {
                            text: '水务底图-浅色版',
                            url: 'http://10.253.190.57:8080/iserver/services/map-ugcv5-szday/wmts-china',
                            layer: 'sz_day',
                            matrixSet: 'Custom_sz_day',
                            serverType: 'WMTS',
                        },
                        {
                            text: '水务底图-蓝色版',
                            url: 'http://10.253.190.57:8080/iserver/services/map-ugcv5-szDark/wmts-china',
                            layer: 'sz_Dark',
                            matrixSet: 'Custom_sz_Dark',
                            serverType: 'WMTS',
                        }
                    ]
                }
            ]
        }
    ]
    var themeLayerData = [
        {
            text: '水务基础图层',
            nodeId: 'basic',
            nodes: [
                {
                    text: '江河湖泊',
                    nodes: JHHP,
                },
                {
                    text: '水利工程',
                    nodes: SLGC

                },
                {
                    text: '监测站(点)',
                    nodes: JCZ
                },
                {
                    text: '其他管理对象',
                    nodes: [
                        ...QTGLDX,
                        {
                            text: '排水分区',
                            nodes: PSM
                        }
                    ]
                },
                {
                    text: '组织机构',
                    nodes: [
                        ...ZZJG,
                        {
                            text: '行政区划',
                            nodes: XZQH
                        }
                    ]
                },
            ],
        },
        {
            text: '城市规化',
            nodes: [
                {
                    text: '法定图则',
                    nodes: [
                        {
                            text: '土地利用规划控制',
                            url:
                                'http://192.168.37.161/dynamap_1/rest/services/FDTZ_2K/MapServer',
                            layer: 'FDTZ_2K',
                            serverType: 'ArcGIS Server2',
                        },
                    ],
                },
                {
                    text: '空间管控',
                    nodes: [
                        {
                            text: '永久基本农田',
                            url:
                                'http://192.168.37.161/dynamap_1/rest/services/JBNT2017_YJ_2K/MapServer',
                            layer: 'JBNT2017_YJ_2K',
                            serverType: 'ArcGIS Server2',
                        },
                    ],
                },
                {
                    text: '蓝线',
                    nodes: [
                        {
                            text: '蓝线',
                            url:
                                'http://192.168.37.161/dynamap_1/rest/services/BLUE_LINE_2K/MapServer',
                            layer: 'BLUE_LINE_2K',
                            serverType: 'ArcGIS Server2',
                        },
                    ],
                },
                {
                    text: '紫线',
                    nodes: [
                        {
                            text: '紫线',
                            url:
                                'http://192.168.37.161/dynamap_1/rest/services/PURPLE_POLY_2K/MapServer',
                            layer: 'PURPLE_POLY_2K',
                            serverType: 'ArcGIS Server2',
                        },
                    ],
                },
            ],
        },
        {
            text: '交通',
            nodes: [
                {
                    text: '轨道',
                    url:
                        'http://192.168.37.161/dynamap_1/rest/services/ORBIT_2K/MapServer',
                    layer: 'ORBIT_2K',
                    serverType: 'ArcGIS Server2',
                },
                {
                    text: '道路',
                    url:
                        'http://192.168.37.161/dynamap_1/rest/services/ROAD_2K/MapServer',
                    layer: 'ROAD_2K',
                    serverType: 'ArcGIS Server2',
                },
            ],
        },
        {
            text: '注记',
            nodes: [
                {
                    text: '矢量注记（蓝色）',
                    url:
                        'http://192.168.37.161/tilemap_1/rest/services/SZMAP/SZMAP_ANNO_ZFW_ZW2K/MapServer',
                    layer: 'SZMAP_ANNO_ZFW_ZW2K',
                    serverType: 'ArcGIS Server',
                },
                {
                    text: '影像注记',
                    url:
                        'http://192.168.37.161/tilemap_1/rest/services/SZMAP/SZMAP_ANNO_ZW2K/MapServer',
                    layer: 'SZMAP_ANNO_ZW2K',
                    serverType: 'ArcGIS Server',
                },
            ],
        },
        {
            text: '海岸线',
            nodes: [
                {
                    text: '海岸线2013年',
                    url:
                        'http://192.168.37.161/dynamap_1/rest/services/COASTLINE_2K/MapServer',
                    layer: 'COASTLINE_2K',
                    serverType: 'ArcGIS Server2',
                },
            ],
        },
        {
            text: '水系',
            nodes: [
                {
                    text: '水系矢量',
                    url:
                        'http://192.168.37.161/tilemap_1/rest/services/SZTHEME/SZMAP_WATER_ZW2K/MapServer',
                    layer: 'SZMAP_ROAD_GK2K',
                    serverType: 'ArcGIS Server',
                },
            ],
        },
    ]

    var yztLayersData = [
        {
            text: '广东2017年7_20级高精度影像图', //影像图
            serverCode: 'YZT1597746939964',
            serverType: 'YZT WMTS',
            zIndex: '-1'
        },
        {
            text: '广东2018年7_17级矢量图',
            serverCode: 'YZT1597746954560',
            serverType: 'YZT WMTS',
            zIndex: '-1'
        },
        {
            text: '广东2018年7_17级矢量注记',
            serverCode: 'YZT1597746953278',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东2018年7_17级环境监测机构图',
            serverCode: 'YZT1597746953424',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东2018年7_17级环境监测机构',
            serverCode: 'YZT1597746945637',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东2018年7_17级污染源监测设施图 ',
            serverCode: 'YZT1597746957118',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东2018年环境监测机构',
            serverCode: 'YZT1597746917604',
            serverType: 'YZT YSFW',
            zIndex: '1'
        },
        {
            text: '广东7_17级大二型水库分布图 ',
            serverCode: 'YZT1597746938307',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级地表水监测断面分布图',
            serverCode: 'YZT1597746919546',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级灌区分布图',
            serverCode: 'YZT1597746914651',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级灌区面分布图',
            serverCode: 'YZT1597746949459',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级海堤分布图',
            serverCode: 'YZT1597746940807',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级河流分布图',
            serverCode: 'YZT1597746922294',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级湖泊分布图',
            serverCode: 'YZT1597746963347',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级机电排灌站分布图',
            serverCode: 'YZT1597746923215',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级空气监测点分布图',
            serverCode: 'YZT1597746956360',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级空气自动站分布图',
            serverCode: 'YZT1597746939623',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级农村供水工程分布图',
            serverCode: 'YZT1597746914387',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级渠道分布图',
            serverCode: 'YZT1597746927223',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级十万亩堤围分布图',
            serverCode: 'YZT1597746957667',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级水利设施分布图',
            serverCode: 'YZT1597746925363',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级水文站分布图',
            serverCode: 'YZT1597746953570',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级水质监测断面分布图',
            serverCode: 'YZT1597746915982',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级万亩堤围分布图',
            serverCode: 'YZT1597746917758',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级污染源图',
            serverCode: 'YZT1597746929584',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级五万亩堤围分布图',
            serverCode: 'YZT1597746952209',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级县级饮用水源分布图',
            serverCode: 'YZT1597746950177',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级小堤围分布图',
            serverCode: 'YZT1597746947632',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级小山塘分布图',
            serverCode: 'YZT1597746922444',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级小水陂分布图',
            serverCode: 'YZT1597746942444',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级小一型水库分布图',
            serverCode: 'YZT1597746963055',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级重点污染源监测图',
            vtUrl: '',
            serverCode: 'YZT1597746943467',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东大型水闸分布',
            serverCode: 'YZT1597746963776',
            serverType: 'YZT YSFW',
            zIndex: '1'
        },
        {
            text: '广东渡槽分布',
            serverCode: 'YZT1597746959532',
            serverType: 'YZT YSFW',
            zIndex: '1'
        },
        {
            text: '广东灌区面分布',
            serverCode: 'YZT1597746926909',
            serverType: 'YZT YSFW',
            zIndex: '1'
        },
        {
            text: '广东湖泊分布',
            serverCode: 'YZT1597746949719',
            serverType: 'YZT YSFW',
            zIndex: '1'
        },
        {
            text: '广东机电排灌站分布',
            serverCode: 'YZT1597746935003',
            serverType: 'YZT YSFW',
            zIndex: '1'
        },
        {
            text: '广东农村供水工程分布',
            serverCode: 'YZT1597746941264',
            serverType: 'YZT YSFW',
            zIndex: '1'
        },
        {
            text: '广东水质监测断面分布',
            serverCode: 'YZT1597746960026',
            serverType: 'YZT YSFW',
            zIndex: '1'
        },
        {
            text: '广东县级饮用水源分布',
            serverCode: 'YZT1597746919859',
            serverType: 'YZT YSFW',
            zIndex: '1'
        },
        {
            text: '广东小电灌分布',
            serverCode: 'YZT1597746942293',
            serverType: 'YZT YSFW',
            zIndex: '1'
        },
        {
            text: '广东小山塘分布',
            serverCode: 'YZT1597746950724',
            serverType: 'YZT YSFW',
            zIndex: '1'
        },
        {
            text: '广东小山塘面分布',
            serverCode: 'YZT1597746957357',
            serverType: 'YZT YSFW',
            zIndex: '1'
        },
        {
            text: '广东小水闸分布',
            vtUrl: '',
            serverCode: 'YZT1597746937286',
            serverType: 'YZT YSFW',
            zIndex: '1'
        },
        {
            text: '惠州2015年9_20级矢量图',
            serverCode: 'YZT1597746926039',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '惠州2015年9_20级影像图',
            serverCode: 'YZT1597746956875',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '汕尾18_20级矢量图',
            serverCode: 'YZT1597746964536',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '汕尾18_20级影像图',
            serverCode: 'YZT1597746938011',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '深圳18_20级矢量图',
            serverCode: 'YZT1597746921113',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '深圳18_20级影像图',
            serverCode: 'YZT1597746942146',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级渡槽分布图',
            serverCode: 'YZT1597746926411',
            serverType: 'YZT WMTS',
            zIndex: '1'
        },
        {
            text: '广东7_17级小电灌分布图',
            serverCode: 'YZT1597746951540',
            serverType: 'YZT WMTS',
            zIndex: '1'
        }
    ]


    var projectionExtent = [-180, -90, 180, 90]
    // 4490坐标系需自定义
    proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs");
    // ol.proj.proj4.register(proj4);
    var projection = new ol.proj.get('EPSG:4490')
    projection.setExtent(projectionExtent)

    // 指定此Arcgis图层的分辨率
    var resolutions = [
        0.001373291015624828,
        0.000686645507812414,
        0.000343322753906207,
        0.0001716613769531035,
        0.00008583068847655175,
        0.000042915344238275876,
        0.000021457672119137938,
        0.000010728836059568969,
        0.0000053644180297844846,
        0.0000026822090148922423,
        0.0000013411045074461211,
    ]
    var matrixIds = []
    for (var z = 0; z < resolutions.length; ++z) {
        matrixIds[z] = z
    }
    var url = BASE_LAYERS.image
    var view = new ol.View({
        projection: projection, //坐标系参数如果不设置，则默认为墨卡托
        resolutions: resolutions, //分辨率层级数组
        center: [114.139825956825, 22.6513875967627],
        zoom: 1,
        minZoom: 1,
        maxZoom: 20
    })

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                id: 'baseLayer',
                source: new ol.source.XYZ({
                    url: url,
                    projection: projection,
                    tileGrid: new ol.tilegrid.WMTS({
                        origin: [-180, 90],
                        tileSize: 256,
                        resolutions: resolutions,
                        matrixIds: matrixIds,
                    }),
                }),
            }),
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: {
                collapsible: false
            }
        }),
        view: view,
    })

    var currentLayerGroupId = 'image'
    var layerList = document.getElementById('menu')
    var inputs = layerList.getElementsByTagName('input')
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = switchMapStyle
    }

    // 切换底图类型
    function switchMapStyle(layer) {
        var layerGroupId = layer.target.id
        if (!layerGroupId) return
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === 'baseLayer') {
                findLayer = each
            }
        }
        if (findLayer) map.removeLayer(findLayer)
        var url = BASE_LAYERS[layerGroupId]
        var baseLayer = new ol.layer.Tile({
            id: 'baseLayer',
            source: new ol.source.XYZ({
                url: url,
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: [-180, 90],
                    tileSize: 256,
                    resolutions: resolutions,
                    matrixIds: matrixIds,
                })
            })
        })
        map.addLayer(baseLayer)
        baseLayer.setZIndex(0)
        currentLayerGroupId = layerGroupId
    }

    // 挂接弹窗div
    var content = document.getElementById('info-content')
    var overlay = new ol.Overlay({
        element: document.getElementById('info'),
        autoPan: true,
        autoPanAnimation: {
            duration: 250,
        },
    })
    // map绑定popup
    map.addOverlay(overlay)
    // 关闭按钮
    document.getElementById('popup-closer').onclick = function () {
        overlay.setPosition(undefined)
        this.blur()
        return false
    }

    function addBaseLayer(data) {
        var url = data.url
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === 'baseLayer') {
                findLayer = each
            }
        }
        if (findLayer) map.removeLayer(findLayer)
        var origin = [-180, 90]
        if (data.hasOwnProperty('origin')) {
            origin = data.origin
        }
        var resolutionsObj = resolutions
        var matrixIdsObj = matrixIds
        if (data.hasOwnProperty('type') && data.type === '1') {
            resolutionsObj = new Array(18);
            matrixIdsObj = new Array(18);
            for (var z = 0; z < 18; ++z) {
                var res = 0.703125
                resolutionsObj[z] = res / Math.pow(2, z - 1);
                matrixIdsObj[z] = z;
            }
        }
        var source = new ol.source.XYZ({
            url: url + '/tile/{z}/{y}/{x}',
            projection: projection,
            tileGrid: new ol.tilegrid.WMTS({
                origin: origin,
                tileSize: 256,
                resolutions: resolutionsObj,
                matrixIds: matrixIdsObj,
            }),
        })
        if (data.serverType === "ArcGIS Server2") {
            source = new ol.source.TileArcGISRest({
                url: url,
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: [-180, 90],
                    tileSize: 256,
                    resolutions: resolutions,
                    matrixIds: matrixIds,
                })
            })
        }

        var baseLayer = new ol.layer.Tile({
            id: 'baseLayer',
            source: source
        })
        map.addLayer(baseLayer)
        baseLayer.setZIndex(0)
    }

    // 保存已添加图层style
    var styleArr = []

    // 加载矢量瓦片图层
    function addVectorTileLayer(key, params) {
        console.log(params)
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === key) {
                findLayer = each
            }
        }
        if (findLayer) {
            map.removeLayer(findLayer)
        }
        var format = new ol.format.MVT({
            featureClass: ol.Feature,
        })
        var styleURL = params.vtUrl + '/style.json'
        var style = new ol.supermap.MapboxStyles({
            style: styleURL,
            map: map,
            selectedStyle: function (feature) {
                if (feature.getGeometry() instanceof ol.geom.Point) {
                    return new ol.style.Style({
                        image: new ol.style.Icon({
                            crossOrigin: 'anonymous',
                            src: 'img/selectIcon.png',
                            scale: 0.8,
                        }),
                    })
                } else {
                    return new ol.style.Style({
                        image: new ol.style.Circle({
                            stroke: new ol.style.Stroke({
                                color: 'red',
                                width: 3,
                            }),
                        }),
                        stroke: new ol.style.Stroke({
                            color: 'red',
                            width: 3,
                        }),
                        fill: new ol.style.Fill({
                            color: 'rgba(0, 0, 255, 0.1)',
                        }),
                    })
                }
            },
        })
        style.on('styleloaded', function () {
            let vectorLayer = new ol.layer.VectorTile({
                declutter: true,
                source: new ol.source.VectorTileSuperMapRest({
                    style: styleURL,
                    projection: projection,
                    format: format,
                }),
                style: style.getStyleFunction(),
            })
            vectorLayer.set('id', key)
            map.addLayer(vectorLayer)
            vectorLayer.setZIndex(5)
            styleArr.push({
                id: key,
                style: style,
            })
        })
    }

    // 地图点击
    map.on('click', mapOnClickListener)

    function mapOnClickListener(e) {
        // 取消定位
        overlay.setPosition(undefined)
        var selected = false
        // 获取点位要素
        var features = map.getFeaturesAtPixel(e.pixel, {
            hitTolerance: 5, // 容差
        })
        if (!features || !features.length) return
        var props = features[0].getProperties()
        console.log(props)
        let layerKey = '' // 图层名称
        if (props.layer) {
            let sourceArr = props.layer.split('@')
            layerKey = sourceArr[1]
        }
        let html = ''
        // 将主要字段放在前面
        if (props['obj_name']) {
            html = html + '名称：' + props['obj_name'] + '<br>'
        }
        if (props['obj_code']) {
            html = html + '编码：' + props['obj_code'] + '<br>'
        }
        if (props['bas_nm']) {
            html = html + '所属流域：' + props['bas_nm'] + '<br>'
        }
        if (props['bas_cd']) {
            html = html + '流域编码：' + props['bas_cd'] + '<br>'
        }
        let ignoreProps = [
            'center_x',
            'center_y',
            'geometry',
            'layer',
            'fd_type',
            'obj_name',
            'obj_code',
            'elementtype',
            'elementtyp',
            'bas_nm',
            'bas_cd',
            'UserID',
            'Z',
            'elementtyp',
            'elementtype',
            'RefName',
            'Field_smuserid',
            'field_smuserid',
            'Field_SmUserID',
            'name',
            'code',
            'CODE',
            'PRJTP',
            'LY_2',
            'x1',
            'x2',
            'y1',
            'y2',
            'Field_SmUserID',
            'Field_SmUserID_1',
        ]
        for (let prop in props) {
            // 忽略supermap自带字段 与 自定义忽略字段
            if (
                prop.substr(0, 2).toUpperCase() === 'SM' ||
                ignoreProps.includes(prop)
            ) {
                continue
            }
            let propName = getCnField(layerKey, prop)
            html = html + propName + '：' + props[prop] + '<br>'
        }
        content.innerHTML = html
        if (!html) return
        // 指定弹窗位置
        overlay.setPosition(e.coordinate)
        selected = true
    }

    // 鼠标移上高亮
    map.on('pointermove', pointermoveFunc)
    let currStyle = null
    let currLayer = null

    function pointermoveFunc(e) {
        if (e.dragging) return
        if (currStyle && currLayer) {
            currStyle.clearSelectedObjects()
            currLayer.changed()
        }
        let alllayers = map.getLayers().getArray();

        // console.log('%c alllayers: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;', alllayers);
        map.forEachFeatureAtPixel(
            e.pixel,
            function (feature, featureLayer) {

                console.log('%c feature, featureLayer: ', 'color: MidnightBlue; background: Aquamarine; font-size: 20px;', feature, featureLayer);
                if (featureLayer.get('id') === 'markerLayer') {
                    return
                }
                if (feature) {
                    let url = featureLayer.getSource()._tileUrl
                    if (url) {
                        let index = url.lastIndexOf('tile')
                        url = url.substr(0, index - 1)
                        let id = featureLayer.get('id')
                        let i = styleArr.findIndex((item) => {
                            return item.id == id
                        })
                        let style = styleArr[i].style
                        currStyle = style
                        currLayer = featureLayer
                        style.setSelectedId(
                            feature.getId(),
                            feature.getProperties().layer
                        )
                        featureLayer.changed()
                    }

                }
            },
            {
                hitTolerance: 1,
            }
        )
    }

    // 获取中文字段名
    function getCnField(key, en) {
        if (!key) return en
        if (!FIELD_CONFIG[key]) return en
        return FIELD_CONFIG[key][en] ? FIELD_CONFIG[key][en] : en
    }

    // 移除图层
    function removeLayer(key) {
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === key) {
                findLayer = each
            }
        }
        if (findLayer) {
            map.removeLayer(findLayer)
            styleArr.splice(
                styleArr.findIndex(
                    (item) => item.id === findLayer.get('id')
                ),
                1
            )
        }
    }

    function addNodeLayer(key, node) {
        // debugger
        if (node.serverType === 'ArcGIS Server') {
            addArcGISLayer(key, node)
        } else if (node.serverType === 'VectorTile') {
            addVectorTileLayer(key, node)
        } else if (node.serverType === 'ArcGIS Server2') {
            addTileArcGISLayer(key, node)
        } else if (node.serverType === 'YZT WMTS') {
            var serviceUrl = GMAPURL.replace(/{{serviceCode}}/, node.serverCode)
            let dtsource = getWMTSLayerSource(serviceUrl);

            console.log('%c dtsource: ', 'color: MidnightBlue; background: Aquamarine; font-size: 20px;', dtsource);
            var wmsLayer = new ol.layer.Tile({
                id: node.serverCode,
                source: dtsource
            })

            wmsLayer.setZIndex(node.zIndex)

            if (['YZT1597746938011', 'YZT1597746964536'].includes(node.serverCode)) {
                map.getView().setCenter([115.36502, 22.7787])
                map.getView().setZoom(8)
            }
            map.addLayer(wmsLayer)

        } else if (node.serverType === 'YZT YSFW') {
            var serviceUrl = GMAPURL.replace(/{{serviceCode}}/, node.serverCode)
            var wfsObj = getWFSLayer(serviceUrl)
            var vectorLayer = new ol.layer.Vector({
                id: node.serverCode,
                source: wfsObj.source,
                style: wfsObj.style
            });
            map.addLayer(vectorLayer)
        }
    }


    function addArcGISLayer(key, params) {
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === key) {
                findLayer = each
            }
        }
        if (findLayer) {
            map.removeLayer(findLayer)
        }
        var layer = new ol.layer.Tile({
            id: key,
            source: new ol.source.XYZ({
                url: params.url + '/tile/{z}/{y}/{x}',
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: [-180, 90],
                    tileSize: 256,
                    resolutions: resolutions,
                    matrixIds: matrixIds,
                }),
            }),
        })
        map.addLayer(layer)
        layer.setZIndex(5)
    }

    function addTileArcGISLayer(key, params) {
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === key) {
                findLayer = each
            }
        }
        if (findLayer) {
            map.removeLayer(findLayer)
        }
        var layer = new ol.layer.Tile({
            id: key,
            source: new ol.source.TileArcGISRest({
                url: params.url,
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: [-180, 90],
                    tileSize: 256,
                    resolutions: resolutions,
                    matrixIds: matrixIds,
                }),
            }),
        })
        map.addLayer(layer)
        layer.setZIndex(5)
    }


    var nodeCheckedSilent = false

    function nodeChecked(event, node) {
        if (nodeCheckedSilent) return
        nodeCheckedSilent = true

        console.log('%c : node', 'color: MidnightBlue; background: Aquamarine; font-size: 20px;', node);
        addNodeLayer(node.nodeId, node)
        // addVectorTileLayer(node.nodeId, node)
        checkAllParent(node)
        checkAllSon(node)
        nodeCheckedSilent = false
    }

    var nodeUncheckedSilent = false

    function nodeUnchecked(event, node) {
        if (nodeUncheckedSilent) {
            return
        }
        nodeUncheckedSilent = true
        removeLayer(node.nodeId)
        uncheckAllParent(node)
        uncheckAllSon(node)
        nodeUncheckedSilent = false
    }

    // 选中全部父节点
    function checkAllParent(node) {
        $('#tree1').treeview('checkNode', node.nodeId, {
            silent: true,
        })

        var parentNode = $('#tree1').treeview('getParent', node.nodeId)
        if (!('nodeId' in parentNode)) {
            return
        } else {
            checkAllParent(parentNode)
        }
    }

    //取消全部父节点
    function uncheckAllParent(node) {
        $('#tree1').treeview('uncheckNode', node.nodeId, {
            silent: true,
        })
        var siblings = $('#tree1').treeview('getSiblings', node.nodeId)
        var parentNode = $('#tree1').treeview('getParent', node.nodeId)
        if (!('nodeId' in parentNode)) {
            return
        }
        var isAllUnchecked = true //是否全部没选中
        for (var i in siblings) {
            if (siblings[i].state.checked) {
                isAllUnchecked = false
                break
            }
        }
        if (isAllUnchecked) uncheckAllParent(parentNode)
    }

    // 级联选中所有子节点
    function checkAllSon(node) {
        $('#tree1').treeview('checkNode', node.nodeId, {
            silent: true,
        })
        if (node.nodes != null && node.nodes.length > 0) {
            for (var i in node.nodes) {
                addNodeLayer(node.nodes[i].nodeId, node.nodes[i])
                // addVectorTileLayer(node.nodes[i].nodeId, node.nodes[i])
                checkAllSon(node.nodes[i])
            }
        }
    }

    // 级联取消所有子节点
    function uncheckAllSon(node) {
        if (!node) return
        $('#tree1').treeview('uncheckNode', node.nodeId, {
            silent: true,
        })
        if (node.nodes != null && node.nodes.length > 0) {
            for (var i in node.nodes) {
                removeLayer(node.nodes[i].nodeId)
                uncheckAllSon(node.nodes[i])
            }
        }
    }

    $('#tree1').treeview({
        showCheckbox: true,
        data: themeLayerData,
        onNodeChecked: nodeChecked,
        onNodeUnchecked: nodeUnchecked,
        levels: 3,
    })

    $('#tree1').treeview('uncheckAll', {
        silent: true,
    })

    function nodeSelected(event, node) {
        if (node.serverType === "WMTS") {
            addWMTSLayer(node.nodeId, node)
        } else {
            addBaseLayer(node)
        }
    }

    $('#treeBaseLayer').treeview({
        showCheckbox: false,
        data: baseData,
        levels: 3,
        onNodeSelected: nodeSelected,
    })
    // 粤政图
    $('#treeYztlayers').treeview({
        showCheckbox: true,
        data: yztLayersData,
        onNodeChecked: nodeChecked,
        onNodeUnchecked: nodeYztUnchecked,
        levels: 2
    })

    $('#treeYztlayers').treeview('uncheckAll', {
        silent: true,
    })

    function nodeYztUnchecked(event, node) {
        if (nodeUncheckedSilent) {
            return
        }
        nodeUncheckedSilent = true
        removeLayer(node.serverCode)
        uncheckAllParent(node)
        uncheckAllSon(node)
        nodeUncheckedSilent = false
    }

    $('#tbStat').bootstrapTable({
        striped: true, //是否显示行间隔色
        cache: false, //是否使用缓存，默认为true
        smartDisplay: false,
        search: false, //是否显示表格搜索
        strictSearch: true,
        showColumns: false, //是否显示所有的列
        showRefresh: false, //是否显示刷新按钮
        minimumCountColumns: 2, //最少允许的列数
        clickToSelect: true, //是否启用点击选中行
        height: 520, //行高
        uniqueId: 'ID', //每一行的唯一标识
        showToggle: false, //是否显示详细视图和列表视图的切换按钮
        cardView: false, //是否显示详细视图
        detailView: false, //是否显示父子表
        columns: [
            {
                field: 'obj_type_name',
                title: '名称',
                width: 180,
            },
            {
                field: 'count',
                title: '数量',
                width: 120,
            }
        ], //列设置
        onClickRow: function (row, $element) {
            if (bufferWKT && row.obj_type) {
                $('#bufferback')[0].style.display = 'block'
                // $('#bufferback2')[0].style.display = 'inline-grid'
                getItemList(row.obj_type)
            } else {
                onClickQuery(row.obj_type)
            }
        },
    })

    // 统计
    function onClickStatistic() {
        clearInteraction()
        $('.panel-result')[0].style.display = 'block'
        $('.tbStat')[0].style.display = 'block'
        $('.tbQuery')[0].style.display = 'none'
        // 请求参数
        var jsonParam = JSON.stringify({
            keyword: $('#sKeyword')[0].value,
        })
        $.ajax({
            url: REQUEST_STAT,
            data: jsonParam,
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            success: function (res) {
                if (res.data) {
                    var result = {
                        data: res.data.groups,
                        total: res.data.groups.length,
                    }
                    $('#tbStat').bootstrapTable('load', result)
                }
            }
        })
    }

    loadSelector()

    // 加载所有类型
    function loadSelector() {
        // 请求所有类型
        var jsonParam = JSON.stringify({
            keyword: '',
        })
        $.ajax({
            url: REQUEST_STAT,
            data: jsonParam,
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            success: function (res) {
                if (res.data) {
                    var opts = res.data.groups
                    var html = ''
                    for (let each of opts) {
                        html +=
                            '<option value="' +
                            each.obj_type +
                            '">' +
                            each.obj_type_name +
                            '</option>'
                    }
                    $('.typeList').append(html)
                }
            },
        })
    }

    // 初始化表格
    $('#tbQuery').bootstrapTable({
        striped: true, //是否显示行间隔色
        // cache: false, //是否使用缓存，默认为true
        smartDisplay: false,
        search: false, //是否显示表格搜索
        strictSearch: true,
        showColumns: false, //是否显示所有的列
        showRefresh: false, //是否显示刷新按钮
        minimumCountColumns: 2, //最少允许的列数
        clickToSelect: true, //是否启用点击选中行
        height: 520, //行高
        uniqueId: 'ID', //每一行的唯一标识，一般为主键列
        showToggle: false, //是否显示详细视图和列表视图的切换按钮
        cardView: false, //是否显示详细视图
        detailView: false, //是否显示父子表
        pageNumber: 1, //初始化加载第一页
        pagination: true, //是否分页
        pageSize: 20, //单页记录数
        onClickRow: rowClick,
        onPageChange: pageChanged,
        columns: [
            {
                field: 'obj_code',
                title: '编码',
                width: 80,
            },
            {
                field: 'obj_name',
                title: '名称',
                width: 180,
            },
        ]
    })

    var queryData = []
    var currData = []

    // 页码切换
    function pageChanged(pageNum) {
        overlay.setPosition(undefined)
        if (bufferWKT) {
            var size = $('#tbQuery')[0].rows.length - 1
            let copyData = queryData.slice()
            currData = copyData.splice((pageNum - 1) * size, size)
            AddMapPoints(currData)
        } else {
            var size = $('#tbQuery')[0].rows.length - 1
            let copyData = queryData.slice()
            currData = copyData.splice((pageNum - 1) * size, size)
            AddMapPoints(currData)
        }
    }

    function showDetail(obj) {
        overlay.setPosition(undefined)
        var props = obj
        content.innerHTML =
            '编号：' +
            props['obj_code'] +
            '<br>' +
            '名称：' +
            props['obj_name'] +
            '<br>' +
            '类型：' +
            props['obj_type_name'] +
            '<br>' +
            '经度：' +
            props['center_x'] +
            '<br>' +
            '纬度：' +
            props['center_y']
        overlay.setPosition([
            parseFloat(props['center_x']),
            parseFloat(props['center_y']),
        ])
    }

    var searchQueryByID = ''

    function getDetail(id) {
        var jsonParam = JSON.stringify({
            id: id
        })
        $.ajax({
            url: REQUEST_DETAIL,
            data: jsonParam,
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            success: function (res) {
                if (res.data) {
                    showDetail(res.data.item)
                    if (selectType === 4) {
                        console.log("getDetail")
                        console.log(JSON.stringify(res.data.item))
                        searchQueryByID = id
                        getBufferArea(res.data.item)
                    }
                }
            },
        })
    }

    // 行点击
    function rowClick(row, $element, field) {
        // 查询详情并定位
        getDetail(row.id)
        // 定位
        view.setCenter([
            parseFloat(row['center_x']),
            parseFloat(row['center_y']),
        ])
        view.setZoom(6)
    }

    function searchQuery() {
        var searchDisplay = document.getElementById('searchListDiv').style.display
        var type = ''
        var keyword = ''
        console.log(searchDisplay)
        if (searchDisplay === 'table') {
            // 缓冲区要素类型
            type = $('#searchList')[0].value
            getDetail(searchQueryByID)
            getItemList(type)
        } else {
            type = $('#typeList2')[0].value
            onClickQuery(type, keyword)
        }
    }

    // 查询按钮
    function onClickQuery(elementType, newKeyword) {
        clearInteraction()
        $('.panel-result')[0].style.display = 'block'
        $('.tbStat')[0].style.display = 'none'
        $('.tbQuery')[0].style.display = 'block'
        var type = $('#typeList')[0].value
        var keyword = $('#qKeyword')[0].value

        if (elementType) {
            type = elementType
        }
        if (newKeyword) {
            keyword = newKeyword
        }

        if (!type) return
        // 请求参数
        var jsonParam = JSON.stringify({
            pageIndex: 1,
            pageSize: 500000,
            objType: type,
            keyword: keyword,
        })
        $.ajax({
            url: REQUEST_QUERY,
            data: jsonParam,
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            success: function (res) {
                if (res.data) {
                    queryData = res.data.item
                    var result = {
                        data: queryData,
                        total: res.data.item.length,
                    }
                    $('.bufferDistanceDiv')[0].style.display = 'table'
                    $('#tbQuery').bootstrapTable('load', result)
                    pageChanged(1)
                }
            },
        })
    }

    var markerLayer = null

    function AddMapPoints(data) {
        var features = []
        for (let each of data) {
            features.push({
                type: 'Feature',
                properties: each,
                geometry: {
                    type: 'Point',
                    coordinates: [
                        parseFloat(each.center_x),
                        parseFloat(each.center_y),
                    ],
                },
            })
        }

        var vectorSource = new ol.source.Vector({
            features: new ol.format.GeoJSON().readFeatures({
                type: 'FeatureCollection',
                features: features,
            }),
            wrapX: false,
        })
        if (markerLayer) {
            markerLayer.setSource(vectorSource)
        } else {
            markerLayer = new ol.layer.Vector({
                source: vectorSource,
                style: new ol.style.Style({
                    image: new ol.style.Icon({
                        anchor: [0.5, 0.5],
                        src: 'img/markerbig_select.png',
                    }),
                }),
            })
            map.addLayer(markerLayer)
            markerLayer.setZIndex(7)
            markerLayer.set('id', 'markerLayer')
        }
        var extent = markerLayer.getSource().getExtent()
        view.fit(extent, map.getSize())
    }

    function onClickClose(value) {
        $('.panel-result')[0].style.display = 'none'
        $('#bufferback')[0].style.display = 'none'
        // $('#bufferback2')[0].style.display = 'none'
        $('#tbStat').bootstrapTable('load', {
            data: [],
            total: 0,
        })
        overlay.setPosition(undefined)
        $('#tbQuery').bootstrapTable('load', {
            data: [],
            total: 0,
        })
        removeLayer('markerLayer')
        markerLayer = null
        if (value === 'close') {
            if (vectorLayer) {
                map.removeLayer(vectorLayer)
            }
            if (sourceBuffer) {
                sourceBuffer.clear()
            }
        }
    }

    var sourceDraw = new ol.source.Vector({
        wrapX: false,
    })
    var layerDraw = new ol.layer.Vector({
        source: sourceDraw,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'rgba(0, 153, 255, 0.8)',
                lineDash: [2, 4],
                width: 2,
            }),
        }),
    })
    var sourceBuffer = new ol.source.Vector({
        wrapX: false,
    })
    var layerBuffer = new ol.layer.Vector({
        source: sourceBuffer,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#6CBBFF',
                width: 3,
            }),
            fill: new ol.style.Fill({
                color: 'rgba(0, 0, 255, 0.1)',
            }),
        }),
    })
    map.addLayer(layerDraw)
    map.addLayer(layerBuffer)

    var buttons = $('.btn-group').children()
    var draw = null
    buttons.map(function (key) {
        var value = buttons[key].value
        if (value === 'Clear') {
            $(buttons[key]).on('click', function () {
                clearInteraction()
            })
            return
        }
        $(buttons[key]).on('click', function () {
            clearInteraction()
            draw = new ol.interaction.Draw({
                source: sourceDraw,
                type: buttons[key].value,
                snapTolerance: 20,
            })
            map.addInteraction(draw)
            draw.on('drawend', featureDrawEnd)
        })
    })

    var drawFeature = null
    var bufferWKT = null

    function featureDrawEnd(event) {
        // 移除交互
        clearInteraction()
        // 存储当前绘制的对象
        drawFeature = event.feature
        let bufferDistance = $('#distance')[0].value
        if (!bufferDistance) {
            bufferDistance = bufferDistance + 0.001
        }
        bufferWKT = startBufferHandler(drawFeature, bufferDistance)
        loadBufferSearch(bufferWKT)
    }

    function startBufferHandler(feature, distance) {
        let polygonGeometry = null
        bufferArea = buildBuffer(feature, distance)
        sourceBuffer.clear()
        sourceBuffer.addFeature(bufferArea)
        // 转换为WKT格式
        polygonGeometry = bufferArea.getGeometry()
        let format = new ol.format.WKT()
        let wkt = format.writeGeometry(polygonGeometry)
        return wkt
    }

    function loadBufferSearch(wkt, elementType) {
        if (!wkt) return
        let checkedNodes = $('#tree1').treeview('getChecked')
        let types = []
        for (let each of checkedNodes) {
            if (!each.state.expanded) {
                types.push(each.layer)
            }
        }
        if (elementType) {
            types = elementType
        }
        $('#searchListDiv')[0].style.display = 'table'
        $('.panel-result')[0].style.display = 'block'
        $('.tbStat')[0].style.display = 'block'
        $('.tbQuery')[0].style.display = 'none'
        var jsonParam = JSON.stringify({
            location: wkt,
            objTypes: types,
        })
        document.getElementById('searchList').innerHTML = ''
        $.ajax({
            url: REQUEST_BUFFERCOUNT,
            data: jsonParam,
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            success: function (res) {
                if (res.data) {
                    var opts = res.data.groups
                    var html = ''

                    for (let each of opts) {
                        html +=
                            '<option value="' +
                            each.obj_type +
                            '">' +
                            each.obj_type_name +
                            '</option>'
                    }
                    $('#searchList').append(html)
                    if (opts) {
                        $('#tbStat').bootstrapTable(
                            'load',
                            res.data.groups
                        )
                    }
                }
            }
        })
    }

    function getItemList(type) {
        $('.panel-result')[0].style.display = 'block'
        $('.tbStat')[0].style.display = 'none'
        $('.tbQuery')[0].style.display = 'block'

        // 请求参数
        var jsonParam = JSON.stringify({
            pageIndex: 1,
            pageSize: 200000,
            location: bufferWKT,
            objType: type,
        })
        $.ajax({
            url: REQUEST_BUFFERDATA,
            data: jsonParam,
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            success: function (res) {
                if (res.data) {
                    queryData = res.data.item
                    var result = {
                        data: queryData,
                        total: res.data.total,
                    }
                    $('#tbQuery').bootstrapTable('load', result)
                    pageChanged(1)
                }
            },
        })
    }

    let buildBuffer = function (feature, radius, options, num) {
        let format_ = new ol.format.GeoJSON()
        let geojson = null
        if (num) {
            geojson = feature.features[0]
        } else {
            geojson = format_.writeFeatureObject(feature)
        }
        let result
        try {
            result = turf.buffer(geojson, Number(radius), options)
        } catch (error) {
            console.log(error)
            let simple = turf.simplify(geojson)
            result = turf.buffer(simple, Number(radius), options)
        }
        let resultFeature = null
        if (result) {
            if (result.type === 'Feature') {
                resultFeature = format_.readFeatureFromObject(result)
            } else if (result.type === 'FeatureCollection') {
                resultFeature = format_.readFeaturesFromObject(result)
            }
        }
        return resultFeature
    }

    function backtoForward() {
        $('#bufferback')[0].style.display = 'none'
        // $('#bufferback2')[0].style.display = 'none'
        $('.panel-result')[0].style.display = 'block'
        $('.tbStat')[0].style.display = 'block'
        $('.tbQuery')[0].style.display = 'none'
        removeLayer('markerLayer')
        markerLayer = null
    }

    function clearInteraction() {
        sourceDraw.clear()
        sourceBuffer.clear()
        bufferWKT = null
        if (draw) {
            map.removeInteraction(draw)
            draw = null
        }
        onClickClose()
    }

    var selectType = 1

    // tab切换
    function handleSelect(type) {
        selectType = type
        clearInteraction()
        $('.panel-result')[0].style.display = 'none'
        $('.tbStat')[0].style.display = 'none'
        $('.tbQuery')[0].style.display = 'none'
        $('.bufferQuery')[0].style.display = 'none'
        $('#searchListDiv')[0].style.display = 'none'
        $('.bufferDistanceDiv')[0].style.display = 'none'
        if (type === 4) {
            $('.panel-result')[0].style.marginTop = '40px'
        }
    }

    // 缓冲区相关要素类型
    function handleSearch() {
        removeLayer('markerLayer')
        markerLayer = null
        if (vectorLayer) {
            map.removeLayer(vectorLayer)
        }
        if (sourceBuffer) {
            sourceBuffer.clear()
        }
        bufferWKT = ''
        view.setZoom(1)
        view.setCenter([114.139825956825, 22.6513875967627])
        $('.tbQuery')[0].style.display = 'none'
        $('.panel-result')[0].style.display = 'block'
        $('.tbStat')[0].style.display = 'block'
        var jsonParam = JSON.stringify({
            keyword: '',
        })
        $.ajax({
            url: REQUEST_STAT,
            data: jsonParam,
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            success: function (res) {
                if (res.data) {
                    console.log(res.data)
                    if (res.data.groups) {
                        $('#tbStat').bootstrapTable(
                            'load',
                            res.data.groups
                        )
                    }
                }
            },
        })
    }

    var vectorLayer = null

    // 缓冲区绘制
    function getBufferArea(data) {
        if (vectorLayer) {
            map.removeLayer(vectorLayer)
        }
        var bufferValue = $('#bufferDistance')[0].value
        var geometry = new ol.format.GeoJSON().readFeature(data.geoShape);
        bufferWKT = startBufferHandler(geometry, bufferValue)
        sourceBuffer.addFeature(geometry)

        vectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [geometry],
            }),
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: '#6db3d9'
                }),
                stroke: new ol.style.Stroke({
                    color: '#6db3d9',
                    width: 0
                })
            })
        })
        map.addLayer(vectorLayer)
        vectorLayer.setZIndex(6)
        loadBufferSearch(bufferWKT, [])
    }

    document.getElementById('typeList2').onchange = function () {
        $('#searchListDiv')[0].style.display = 'none'
        $('.bufferDistanceDiv')[0].style.display = 'none'
        if (vectorLayer) {
            map.removeLayer(vectorLayer)
        }
    }

    //获取地图服务图层信息
    function getCapabilities(serviceUrl, type) {
        var path = ''
        if (type === 'wmts') {
            path = '?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities'
        } else {
            path = '?VERSION=1.0.0&REQUEST=GetFeature&SERVICE=WFS'
        }
        var xml;
        $.ajax({
            type: "get",
            url: serviceUrl + path,
            async: false,
            success: function (result) {

                console.log('%c                result : ', 'color: MidnightBlue; background: Aquamarine; font-size: 20px;', result);
                xml = result;
            }
        });
        return xml;
    }

    /**
     * 获取wmtsLayer的dataSource
     * @param serviceUrl url地址
     * @returns {ol.source.WMTS}
     */
    function getWMTSLayerSource(serviceUrl) {
        var xml = getCapabilities(serviceUrl, 'wmts');
        var format = new ol.format.WMTSCapabilities();
        var geojson = format.read(xml.documentElement);

        console.log('%c : xml.documentElement', 'color: MidnightBlue; background: Aquamarine; font-size: 20px;', xml.documentElement);
        console.log('%c        geojson : ', 'color: MidnightBlue; background: Aquamarine; font-size: 20px;', geojson);
        if (!geojson) {
            return
        }
        var data = geojson.Contents.Layer[0];
        console.log('%c        data : ', 'color: MidnightBlue; background: Aquamarine; font-size: 20px;', data);

        var layerParam = {
            layerName: data.Abstract,
            styleName: data.Style[0].Identifier,
            tilematrixset: data.TileMatrixSetLink[0].TileMatrixSet,
            format: data.Format[0]
        };
        var size = ol.extent.getWidth(projectionExtent) / 256;
        var resolutionsYzt = []
        var matrixIdsTzt = []
        for (var z = 2; z < 22; ++z) {
            resolutionsYzt[z] = size / Math.pow(2, z);
            matrixIdsTzt.push(z - 2)
        }
        var source = new ol.source.WMTS({
            url: serviceUrl + '?layer=' + layerParam.layerName,
            style: layerParam.styleName,
            matrixSet: layerParam.tilematrixset,
            format: layerParam.format,
            wrapX: true,
            tileGrid: new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent),
                resolutions: resolutionsYzt,
                matrixIds: matrixIdsTzt
            })
        });
        return source;
    }

    function getWFSLayer(serviceUrl) {
        var result = getCapabilities(serviceUrl, 'wfs')
        var format = new ol.format.GML2();
        var features = format.readFeatures(result);
        var style = null

        if (features[0].getGeometry() instanceof ol.geom.Polygon) {
            style = new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#868f98',
                    width: 1,
                }),
                fill: new ol.style.Fill({
                    color: '#DEECFB'
                })
            })
        } else if (features[0].getGeometry() instanceof ol.geom.Point) {
            style = new ol.style.Style({
                image: new ol.style.Circle({
                    fill: new ol.style.Fill({
                        color: '#ff0721'
                    }),
                    radius: 5
                })
            })
        } else if (features[0].getGeometry() instanceof ol.geom.LineString) {
            style = new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#2899fb',
                    width: 4
                })
            })
        }
        var source = new ol.source.Vector({
            features: features
        })
        return {source: source, style: style}
    };
    // 拾取
    var pickClick = null
    var pickLayer = null

    function onClickPickup() {
        $('#tool-PickBox')[0].style.display = 'block'
        pickClick = map.on('click', function (e) {
            var coordinate = e.coordinate
            console.log(coordinate)
            $('#pointX')[0].value = coordinate[0];
            $('#pointY')[0].value = coordinate[1];
            var feature = new ol.Feature({
                geometry: new ol.geom.Point(coordinate),
            });
            if (pickLayer) {
                map.removeLayer(pickLayer)
            }
            pickLayer = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [feature],
                }),
                style: new ol.style.Style({
                    image: new ol.style.Circle({
                        fill: new ol.style.Fill({
                            color: '#ff1109'
                        }),
                        radius: 4
                    }),
                })
            }),
                map.addLayer(pickLayer)
            pickLayer.setZIndex(4)
        })
    }

    function onPickupClear() {
        $('#pointX')[0].value = '';
        $('#pointY')[0].value = '';
        $('#tool-PickBox')[0].style.display = 'none'
        ol.Observable.unByKey(pickClick);
        if (pickLayer) {
            map.removeLayer(pickLayer)
        }
    }

    /**
     * 加载图层 WMTS
     * @param key： node的key
     * @param params：配置参数
     */
    function addWMTSLayer(key, params) {
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === 'baseLayer') {
                findLayer = each
            }
        }
        if (findLayer) {
            map.removeLayer(findLayer)
        }
        var resolutionL = [
            0.0013717509172233532,
            0.0006858754586116766,
            0.0003429377293058383,
            0.00017146886465291915,
            0.00008573443232645957,
            0.00004286721616322979,
            0.000021433608081614893,
            0.000010716804040807447,
            0.000005358402020403723,
            0.0000026792010102018617,
            0.0000013396005051009308
        ]
        var matrixIdsL = []
        for (var z = 0; z < resolutionL.length; ++z) {
            matrixIdsL[z] = z
        }
        var layer = new ol.layer.Tile({
            source: new ol.source.WMTS({
                url: params.url,
                layer: params.layer,
                matrixSet: params.matrixSet,
                format: 'image/png',
                tileGrid: new ol.tilegrid.WMTS({
                    origin: [-180, 90],
                    tileSize: 256,
                    resolutions: resolutionL,
                    matrixIds: matrixIdsL
                }),
                style: 'default'
            })
        })
        layer.set('id', 'baseLayer')
        map.addLayer(layer)
        layer.setZIndex(5)
    }
</script>
</body>
</html>
